{% extends 'wanplus/wangwangba/base_nav_frame.html' %}
{% load staticfiles %}
{% block jspreimport %}
  <script type="text/javascript" src="{% static 'dist/js/thirdparty/vue.js' %}" ></script>
  <script type="text/javascript" src="{% static 'dist/js/config.js' %}"></script>
  <script type="text/javascript" src="{% static 'dist/js/components.js' %}"></script>
{% endblock %}
{% block jsimport %}
  <script type="text/javascript" src="{% static 'dist/js/thirdparty/jquery.mousewheel.js' %}"></script>
  <script type="text/javascript" src="{% static 'dist/js/thirdparty/jquery.perfect-scrollbar.js'%}"></script>
  <script type="text/javascript" src="{% static 'dist/js/thirdparty/dmuploader.js' %}"></script>
{% endblock %}
{% block cssExt %}
  <link rel="stylesheet" rev="stylesheet" href="{% static 'dist/css/thirdparty/perfect-scrollbar.css' %}"/>
  <style type="text/css">
  #trailer-editor {
  }

  #trailer-editor form {
    padding: 15px;
  }

  #preview-video-wrapper {
    margin-left: -1px;
    margin-right: -1px;
    position: relative;
    top: 0;
    left: 0;
  }

  #preview-video-wrapper #preview-video {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  #preview-video-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border: none;
  }

  #preview-video-wrapper h5 {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    margin: 0;
    padding: 15px 5px;
  }

  </style>
{% endblock %}
{% block content %}
  <p>Trailer编辑</p>
  <div class="row">
    <div id="trailer-main" class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
      <panel :view-id="5" without-body>
        <h3 slot="heading">视频预览</h3>
        <div slot="x" id="trailer-editor">
          <div id="preview-video-wrapper" v-el:preview-video-wrapper>
            <div id="preview-video">
              <video-view id="video-view" :sources="currentTrailerUrls" :cover="trailerCover"></video-view>
            </div>
            <h5>${ trailerTitle }</h5>
          </div>
          <form action="post" @submit.prevent>
            <input-field field-id="trailer-title-input" :view-id="1" label="标题" placeholder="请输入Trailer标题" has-feedback v-ref:title-input></input-field>
            <file-field field-id="trailer-cover-input" :view-id="2" label="封面" upload-url="./trailer/cover" allowed-type="image/*"></file-field>
          </form>
        </div>
      </panel>

      <sync-button :view-id="4"
                   button-text="上线"
                   preview-action="./trailer/preview"
                   release-action="./trailer/release"
                   :sync-data="getSyncData"
                   :sync-state="0"></sync-button>

    </div>
    <div id="trailer-dogtv-programs" class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
      <panel without-body>
        <h3 slot="heading">DogTV节目清单</h3>
        <list-view slot="x" id="list-view"
                 :view-id="3"
                 :max-height="580"
                 :items="dogtvItems"
                 :item-type="getItemType"
                 :item-data="getItemData"></list-view>
      </panel>


    </div>
  </div>
{% endblock %}
{% block jsscript %}
  <script type="text/javascript">

  var ItemView = Vue.extend({
    template :
        "<div>" +
          "<input type='checkbox' value='${ data.item.name }' checked='${ data.item.is_trailer }' v-model='checked' @click.stop=''/>" +
          "<span style='margin-left: 8px'>${ data.item.name }</span>" +
        "</div>",
    props : {
      data : Object
    },
    data : function() {
      return {
        checked : false
      }
    },
    methods : {
      setCheck : function(checked) {
        var self = this;
        self.checked = checked;
      },
      isChecked : function() {
        var self = this;
        return self.checked;
      }
    },
    watch : {
      checked : function(newValue, oldValue) {
        this.$dispatch('check-item', this.data.item, newValue);
      }
    }
  });
  Vue.component('item-view', ItemView);

  var main = new Vue({
    el : '#trailer-main'
    , data : {
      trailerCover : '',
      trailerTitle : '',
      currentTrailerUrls : [],
      currentTrailers : [],
      syncData : {
        cover : ''
        , title : ''
        , tokens : ''
      }
    }
    , events : {
      'input': function (viewId, event, inputText) {
        this.syncData.title = inputText;
      }
      , 'sync-ok': function (component, currentState, data) {
        console.log(data);
        component.nextState();
      }
      , 'sync-error': function (component, currentState) {
        console.log("error");
      }
      , 'upload-success' : function(component, id, data) {
        var d = wUtils.getData(data);
        if (d) {
          this.syncData.cover = d.filename;
        }
      }
      , 'upload-error' : function(id, message) {
      }
    }
    , watch : {
      'syncData.cover' : function(newVal, oldVal) {
        this.trailerCover = "//127.0.0.1:8000" + newVal;
      }
      , 'syncData.title' : function(newVal, oldVal) {
        this.trailerTitle = newVal;
      }
      , 'currentTrailers' : function(newVal, oldVal) {
        var list = [];
        $.each(newVal, function(index, item) {
          list.push("http://www.wanbatv.com" + item.url);
        });
        this.currentTrailerUrls = list;
      }
    }
    , methods : {
      notifySelectItem : function(item, index) {
        if (this.currentTrailers.indexOf(item) === -1) {
          this.currentTrailers.push(item);
        }
      }
      , notifyDeselectItem : function(item, index) {
        this.currentTrailers.$remove(item);
      }
      , getSyncData : function() {
        var self = this;
        var trailers = self.currentTrailers;
        var tokens = [];
        for (var i in trailers) {
          tokens.push(trailers[i].token);
        }
        self.syncData.tokens = tokens.join(",");
        return self.syncData;
      }

    }
    , ready : function() {
      var self = this;
      var vWrapper = $(self.$els.previewVideoWrapper);
      var video = $($(vWrapper.children()[0]).children()[0]);
      vWrapper.height(video.height());
      $(vWrapper.children()[0]).height(video.height());
      $(vWrapper.children()[0]).width(vWrapper.width());
      $(vWrapper.children()[1]).width(vWrapper.width() - 10);

      $.ajax('./trailer/info', {
        type : "GET"
        , dataType : "json"
      }).done(function(data) {
        var d = wUtils.getData(data);
        main.syncData.title = d.title || '';
        main.syncData.cover = d.cover || '';
      });
    }
  });

  var sideData = {
    dogtvItems : []
  };
  var side = new Vue({
    el : '#trailer-dogtv-programs',
    data : sideData,
    events : {
      'click-item' : function(parent, view, index, item, element) {
        view.setCheck(!view.isChecked());
      },
      'check-item' : function(item, isChecked) {
        var self = this;
        self.$emit(isChecked ? 'select-item' : 'deselect-item', self, item, self.dogtvItems.indexOf(item));
      }
    },
    methods : {
      getItemData : function(index, item) {
        return {
          item : item
        };
      },
      getItemType : function(index) {
        return "item-view";
      }
    },
    ready : function() {
      var self = this;
      $.ajax('./dogtv/programs', {
        type : "GET"
        , dataType : "json"
        , success : function(data) {
          var list = wUtils.getListData(data);
          if (list && list.length) {
            self.dogtvItems = list;
          }
        }
        , error : function() {
        }
      })
    }
  });
  side.$on('select-item', function(vm, item, index) {
    main.notifySelectItem(item, index);
  });
  side.$on('deselect-item', function(vm, item, index) {
    main.notifyDeselectItem(item, index);
  });

  </script>
{% endblock %}